<template>
   <div id="userslist">
    
   <div id="search" style="margin:10px">
    <el-select
        v-model="searchInput"
        filterable
        clearable
        default-first-option
        remote
        reserve-keyword
        placeholder="Please enter a keyword"
        :remote-method="handleSearch"
        @change="searchChange"
      >
        <el-option v-for="item in searchList" :key="item" :value="item" />
      </el-select>
      <el-button type="primary" style="margin-left:10px" @click="addrole">添加用户</el-button>
   </div>
    <el-table :data="tableData" stripe style="margin-bottom:10px">
    <el-table-column prop="unid"  align='center' label="id"  />
    <el-table-column prop="username" align='center' label="用户名"  width="100"/>
    <el-table-column prop="nickname" align='center' label="昵称" />
    <el-table-column prop="roleName" align='center' label="角色名称" />
    <el-table-column prop="phone" align='center' label="手机号"  width="150"/>
    <el-table-column prop="sex" align='center' label="性别" width="100">
        <template #default="{ row }">
                <b v-if="row.sex == 1">男</b>
                <b v-else>女</b>
            </template>
    </el-table-column>
    <el-table-column prop="" align='center' label="权限"  width="100">
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            class="ml-2"
            inline-prompt
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            active-text="启用"
            inactive-text="禁用"
            active-value="1"
            inactive-value="0"
            @click="changeStatus(row)"
          />
            </template>
    </el-table-column>
    <el-table-column prop="" align='center' label="操作" >
      <template #default="{row}">
       <el-dropdown size="large" split-button type="primary" trigger="click">
      操作
    <template #dropdown>
      <el-dropdown-menu >
          <el-button type="primary" @click="givePer(row)">分配权限</el-button>
        <el-button type="primary" @click=edit(row)>编辑</el-button>
       <el-button type="danger">删除</el-button>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  </template>
    </el-table-column>
  </el-table>
  <div class="page">
    <el-pagination hide-on-single-page background layout="prev, pager, next" :total="pagetotal" :page-size="clpage.count" :current-page="clpage.page"
      @current-change="handleSizeChange"
       /> 
  </div>
  <perDialog :perData="perData" :get-UsersList="getUsersList"></perDialog>
  <roleDialog
   :roleAction="roleAction"
   :title="title"
   :reviewRole="reviewRole"
   :get-UsersList="getUsersList"
  ></roleDialog>
   </div>
</template>
<script setup>
import {getUsersListApi} from '@/api/users'
import {ref,onMounted,reactive} from 'vue'
import { ElMessage } from 'element-plus'
import *as permission from '@/api/permission.js'
import *as role from '@/api/role.js'
import perDialog from '@/components/permissionDialog/index.vue'
import roleDialog from '@/components/roleDialog/index.vue'
import usedialog from "@/store/dialog.js"; 
import userole from '../../store/role.js'
let roler = userole()
let dialog = usedialog()
//修改状态
let changeStatus = async (row)=>{
  try {
    // console.log(row);
    let res = await permission.updateUserApi({unid:row.unid,status:row.status})
    // console.log(res);
    if(res.data.status == 200){
      ElMessage.success('修改成功')
    }
  } catch (error) {
    console.log(error);
    ElMessage.danger('修改失败')
  }
}


//分页搜索
const tableData =ref([])
// let getrow = (row) =>{
//   console.log(row);
// }


let getUsersList = async (clpage={page:1,count:10}) =>{
   try {
    const res = await getUsersListApi(clpage)
    // console.log(res);
    tableData.value = res.data.data
    pagetotal.value = res.data.total
   } catch (error) {
    console.log(error);
   }
}

onMounted(()=>{
  getUsersList()
  // getrow()
})
let handleSearch = (input)=>{
  getSearchList(input)
}
let searchInput = ref('')
let searchData = reactive({
  username: searchInput.value,
  order_by:1
})

const searchList = ref([])
let getSearchList = async (username='',isSelect=false) =>{
  isSelect = true
  try {
     let res = await getUsersListApi({username})
   
      searchList.value = (new Set(res.data.data.map(item => item.username)))
      // isSelect&& (tableData.value = res.data.data)
  } catch (error) {
    console.log(error);
  }
}
let searchChange = (input)=>{
  
}
let pagetotal = ref()
let clpage = reactive({
  page:1,
  count:10
})
let handleSizeChange = (page)=>{
clpage.page = page
  getUsersList(clpage)
}

//分配权限
let perData = reactive({
  unid:'',
  roleid:'',
  roleName:'',
  nickname:''
})
let givePer = (row)=>{
   dialog.$state.perdialogVisible=true
  // console.log(dialog.perdialogVisible);
    // console.log(row);
    perData.unid = row.unid
    perData.roleid = row.roleid
    perData.roleName = row.roleName
    perData.nickname = row.nickname
}
//添加角色
let roleAction = ref('add')
let title = ref('添加角色')
let addrole = ()=>{
  roler.roledialogvisible = true
  // console.log(roler.roledialogvisible);
  roleAction.value = 'add'
  title.value = '添加角色'
}

//编辑角色
let reviewRole =ref()
let edit =(row)=>{
  roler.roledialogvisible = true
  roleAction.value = 'edit'
  title.value = '编辑角色'
  console.log(row);
  reviewRole.value = {...row}
}
</script>
<style scoped>
.page{
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dropdown-menu--large{
   padding: 7px 7px;
}
</style>